<template>
  <!-- 营销 --- 专题推荐 -->
  <div class="homesubject">
    <!-- 筛选搜索 -->
    <div class="search_box">
      <el-row>
        <el-col :span="21" class="left_search">
          <el-icon :size="16" color="#444545" style="vertical-align: middle;">
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </el-col>
        <el-col :span="3" class="right_search">
          <el-button @click="clearSearch">重置</el-button>
          <el-button type="primary" @click="fetch">查询搜索</el-button>
        </el-col>
      </el-row>
      <el-row class="input_search" style="justify-content: left;">
        <!-- 专题名称 -->
        <div class="input_search_item" style="margin-right: 70px; margin-top: 20px;">
          <span>专题名称：</span>
          <el-input autocomplete="false" placeholder="专题名称" v-model="paramsToSend.subjectName" />
        </div>
        <!-- 推荐状态 -->
        <div class="input_search_item" style=" margin-top: 20px;">
          <span>推荐状态：</span>
          <el-select v-model="paramsToSend.recommendStatus" placeholder="全部">
            <el-option label="未推荐" value="0" />
            <el-option label="推荐中" value="1" />
          </el-select>
        </div>
      </el-row>
    </div>
    <!-- 数据列表 -->
    <div class="oprations_box">
      <div class="left_search">
        <el-icon :size="16" color="#444545" style="vertical-align: middle;">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div class="right_btn">
        <el-button @click="showFromDialogFn">
          选择专题
        </el-button>
      </div>
    </div>
    <!-- 品牌列表 -->
    <el-table ref="multipleTableRef" :data="list" style="width: 100%" @selection-change="handleSelectionChange"
      :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center', height: '50px' }" border>
      <el-table-column type="selection" width="55" />
      <el-table-column label="编号" width="120">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column property="subjectName" label="品牌名称" width="700" />
      <!-- 是否推荐 -->
      <el-table-column label="是否推荐">
        <template #default="{ row }">
          <el-switch v-model="row.recommendStatus" :active-value="1" :inactive-value="0"
            @change="switchChange(row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column property="sort" label="排序" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="状态" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.recommendStatus == 1 ? '推荐中' : '未推荐' }}
        </template>
      </el-table-column>
      <!-- 设置排序 -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" link @click="showSortDialogFn(row)">设置排序</el-button>
          <el-button type="primary" link @click="delAdvertise(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 左侧下拉操作 -->
    <div class="select_hand">
      <el-select v-model="batchVal" placeholder="批量操作">
        <el-option label="设为推荐" value="0" />
        <el-option label="取消推荐" value="1" />
        <el-option label="删除" value="2" />
      </el-select>
      <el-button type="primary" @click="batchFn">确定</el-button>
    </div>
    <!-- 添加品牌对话框 -->
    <!-- 引入子组件 -->
    <SelectBrandTwo ref="selectBrand_ref" @close="closeFromDialogFn" />
    <!-- 设置排序框 -->
    <!-- 引入子组件 -->
    <SortTwo :id="sortId" :sort="sortSort" ref="sort_ref" @close2="closeSortDialogFn" @update-sort="fetch" />
    <!-- 分页 -->
    <PaginationTwo v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 15]" :total="total" />

  </div>
</template>
<script setup lang='ts'>
import useTable from '@/hooks/useTable';
import { reactive, ref } from 'vue';
import { Search, Tickets } from '@element-plus/icons-vue'
import PaginationTwo from '@/components/Pagination/PaginationTwo.vue'
import SelectBrandTwo from '@/views/sms/componnents/homesubjectComp/selectBrandTwo.vue'
import SortTwo from '@/views/sms/componnents/homesubjectComp/BrandsortTwo.vue'
// @ts-ignore
import { ElMessage, ElMessageBox } from 'element-plus'
import { ApiRecommendRecommendStatus, ApiRecommendSubjectList, ApirecommendSubjectDelete } from '@/http/sms/api';
const searchParams = reactive({
  subjectName: '',
  recommendStatus: '',
  pageSize: 5
})

let paramsToSend = reactive({ ...searchParams }) // 先复制一份，以免影响到原有数据
// 避免传递空数据
Object.keys(paramsToSend).forEach((key) => {
  const k = key as keyof typeof searchParams; // 进行类型断言，指定 key 的类型为 "endTime"、"name"、"type" 或 "pageSize"
  if (paramsToSend[k] === '') {
    delete paramsToSend[k];
  }
});

let selectBrand_ref = ref<any>(null)
let sort_ref = ref<any>(null)


// 显示选择品牌列表
const showFromDialogFn = () => {
  selectBrand_ref.value.show = true
}

// 隐藏选择品牌列表
const closeFromDialogFn = () => {
  selectBrand_ref.value.show = false
}

const sortId = ref<number>(0)
const sortSort = ref<number>(0)
// 显示排序框
const showSortDialogFn = (sort: any) => {
  sortId.value = sort.id
  sortSort.value = sort.sort
  sort_ref.value.show = true
}
// 隐藏排序框
const closeSortDialogFn = () => {
  sort_ref.value.show = false
}

// 清空搜索栏
const clearSearch = () => {
  // 清空数据
  Object.assign(paramsToSend, searchParams)
  // 重新发送请求
  fetch()

}

// 批量操作的数据
const batchVal = ref<string>('')
// 批量操作数据的id
const batchId = ref<number[] | number>([])

// 选中数据change事件
const multipleSelection = ref<IAdvertiseListModel[]>([])
const handleSelectionChange = (val: IAdvertiseListModel[]) => {
  multipleSelection.value = val
  batchId.value = val.map(item => {
    return item.id
  })
}

// 批量操作事件
const batchFn = () => {
  switch (batchVal.value) {
    case '0':
      switchChange({ id: batchId.value, recommendStatus: 1 })
      break;
    case '1':
      switchChange({ id: batchId.value, recommendStatus: 0 })
      break;
    case '2':
      delAdvertise(batchId.value)
      break;
  }


}

// 是否推荐事件
const switchChange = (brand: any) => {
  ElMessageBox.confirm('是否要修改推荐状态?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 请求接口
    ApiRecommendRecommendStatus({ ids: brand.id, recommendStatus: brand.recommendStatus }).then(res => {
      if (res.code === 200) {
        ElMessage({
          type: 'success',
          message: '修改成功！'
        })
        fetch()
      } else {
        brand.recommendStatus = brand.recommendStatus === 1 ? 0 : 1
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'success',
      message: '已取消操作'
    })
    brand.recommendStatus = brand.recommendStatus === 1 ? 0 : 1
  })
}



// 删除品牌
const delAdvertise = (id: number | number[]) => {
  ElMessageBox.confirm('是否要删除该推荐?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 请求接口 首页专题推荐管理 --- /home/recommendSubject/delete,批量删除推荐
    ApirecommendSubjectDelete(id).then(res => {
      if (res.code === 200) {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
        fetch()
      }
    })
  }).catch(() => {
  })
}

// 首页专题推荐管理 --- /home/recommendSubject/list，分页查询推荐
const { list, pageNum, pageSize, total, fetch } = useTable(ApiRecommendSubjectList, paramsToSend)

console.log(list);


</script>
<style lang="less" scoped>
.homesubject {
  .search_box {
    padding: 20px;
    box-shadow: 0 0 4px 2px #eee;
    margin-bottom: 20px;
    border-radius: 2px;
    // 二十四、将搜索框部分粘性定位到顶部
    position: sticky;
    top: -20px;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.9);

    // 右边按钮
    .right_search {
      display: flex;
      align-items: center;
      justify-content: right;
    }

    .input_search {
      display: flex;
      align-items: center;

      span {
        font-size: 14px;
        color: #606266;
        margin-left: 30px;
      }

      .el-input {
        width: 200px;
      }
    }
  }

  .oprations_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    box-shadow: 0 0 4px 2px #eee;
    margin-bottom: 20px;
    border-radius: 2px;
  }

  // 左边标题
  .left_search {
    display: flex;
    align-items: center;


    span {
      font-size: 14px;
      color: #303133;
      margin-left: 10px;
    }
  }

  .select_hand {
    margin-top: 20px;
    float: left;

    .el-button {
      margin-left: 20px;
    }
  }

  .picImg {
    width: auto;
    object-fit: cover;
  }

}
</style>